<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 校园表白墙</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body style="padding-bottom: 80px; background: linear-gradient(to bottom, #FF6B9D 200px, #f5f5f5 200px);">
    <div class="container mt-4">
        <div class="card mb-3">
            <div class="card-body text-center py-4">
                <div class="mb-3">
                    <i class="bi bi-person-circle" style="font-size: 4rem; color: var(--primary-color);"></i>
                </div>
                <h5 id="userName">加载中...</h5>
                <p class="text-muted mb-3" id="userSchool">-</p>
                <div class="row text-center">
                    <div class="col-4">
                        <div class="fw-bold" id="postCount">0</div>
                        <small class="text-muted">发帖</small>
                    </div>
                    <div class="col-4">
                        <div class="fw-bold" id="commentCount">0</div>
                        <small class="text-muted">评论</small>
                    </div>
                    <div class="col-4">
                        <div class="fw-bold" id="likeCount">0</div>
                        <small class="text-muted">获赞</small>
                    </div>
                </div>
                <div class="mt-3">
                    <span class="badge bg-warning text-dark">LV<span id="userLevel">1</span></span>
                    <span class="badge bg-info ms-2">积分: <span id="userPoints">0</span></span>
                </div>
            </div>
        </div>
        
        <div class="card mb-3">
            <div class="list-group list-group-flush">
                <a href="/my-posts.html" class="list-group-item list-group-item-action">
                    <i class="bi bi-file-text me-2"></i> 我的发帖
                    <i class="bi bi-chevron-right float-end"></i>
                </a>
                <a href="/my-comments.html" class="list-group-item list-group-item-action">
                    <i class="bi bi-chat-left-text me-2"></i> 我的评论
                    <i class="bi bi-chevron-right float-end"></i>
                </a>
                <a href="/my-reports.html" class="list-group-item list-group-item-action">
                    <i class="bi bi-flag me-2"></i> 我的举报
                    <i class="bi bi-chevron-right float-end"></i>
                </a>
            </div>
        </div>
        
        <div class="card">
            <div class="list-group list-group-flush">
                <a href="#" class="list-group-item list-group-item-action" onclick="changePassword()">
                    <i class="bi bi-key me-2"></i> 修改密码
                    <i class="bi bi-chevron-right float-end"></i>
                </a>
                <a href="#" class="list-group-item list-group-item-action text-danger" onclick="logout()">
                    <i class="bi bi-box-arrow-right me-2"></i> 退出登录
                </a>
            </div>
        </div>
    </div>
    
    <div class="bottom-nav">
        <div class="bottom-nav-items">
            <a href="/home.html" class="nav-item">
                <i class="bi bi-house"></i>
                <span>广场</span>
            </a>
            <a href="/messages.html" class="nav-item">
                <i class="bi bi-chat-dots"></i>
                <span>消息</span>
            </a>
            <a href="/profile.html" class="nav-item active">
                <i class="bi bi-person-fill"></i>
                <span>我的</span>
            </a>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        function init() {
            if (!checkLogin()) return;
            loadUserProfile();
        }
        
        function loadUserProfile() {
            request('/user/profile')
                .then(data => {
                    $('#userName').text(data.realName);
                    $('#userSchool').text(`${data.school} - ${data.college}`);
                    $('#postCount').text(data.postCount || 0);
                    $('#commentCount').text(data.commentCount || 0);
                    $('#likeCount').text(data.likeCount || 0);
                    $('#userLevel').text(data.level || 1);
                    $('#userPoints').text(data.points || 0);
                })
                .catch(err => {
                    showToast(err.message, 'danger');
                });
        }
        
        function changePassword() {
            event.preventDefault();
            
            const modal = `
                <div class="modal fade" id="passwordModal" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">修改密码</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <div class="mb-3">
                                    <label class="form-label">旧密码</label>
                                    <input type="password" class="form-control" id="oldPassword">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">新密码</label>
                                    <input type="password" class="form-control" id="newPassword">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">确认新密码</label>
                                    <input type="password" class="form-control" id="confirmPassword">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary" onclick="submitPasswordChange()">确定</button>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            $(modal).appendTo('body');
            const passwordModal = new bootstrap.Modal(document.getElementById('passwordModal'));
            passwordModal.show();
            $('#passwordModal').on('hidden.bs.modal', function() {
                $(this).remove();
            });
        }
        
        function submitPasswordChange() {
            const oldPassword = $('#oldPassword').val();
            const newPassword = $('#newPassword').val();
            const confirmPassword = $('#confirmPassword').val();
            
            if (!oldPassword || !newPassword || !confirmPassword) {
                showToast('请填写完整', 'warning');
                return;
            }
            
            if (newPassword !== confirmPassword) {
                showToast('两次密码不一致', 'warning');
                return;
            }
            
            if (newPassword.length < 6) {
                showToast('密码长度至少6位', 'warning');
                return;
            }
            
            request('/user/password', {
                method: 'PUT',
                body: JSON.stringify({ oldPassword, newPassword })
            })
            .then(() => {
                showToast('密码修改成功，请重新登录', 'success');
                bootstrap.Modal.getInstance(document.getElementById('passwordModal')).hide();
                setTimeout(() => {
                    logout();
                }, 1500);
            })
            .catch(err => {
                showToast(err.message, 'danger');
            });
        }
        
        $(document).ready(init);
    </script>
</body>
</html>
